<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
        }
        div{
            position: fixed;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        ul{
            width: 300px;
            border: 1px solid red;
            height: 1000px;
            overflow: scroll;
            position: relative;
        }
        .last{
            position: absolute;
            top: 600px;
            right: 100px;
            height: 50px;
            width: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>123</li>
        <li>321</li>
        <li>34r34</li>
        <li>321</li>
        <li>123</li>
        <li>12reg3</li>
        <li>12dsg3</li>
        <li>gs</li>
        <li>123</li>
        <li>1dsgfsdg23</li>
        <li>123</li>
        <li>1sdfg23</li>
        <li>1gds23</li>
        <li>123</li>
        <li>123</li>
        <li>12gds3</li>
        <li>1bvcxvbx23</li>
        <li>123</li>
        <li>1bvcc23</li>
        <li>123</li>
        <li>12gxcv3</li>
        <li>123</li>
        <li>12xcbvcx3</li>
        <li>123</li>
        <li>12gdsfg3</li>
        <li>123</li>
        <li>12bvcxb3</li>
        <li>123</li>
        <li>123</li>
        <li>1bxcv23</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>12fgsv3</li>
        <li>123</li>
        <li>1trew23</li>
        <li>123</li>
        <li>12fsdgds3</li>
        <li>12bcx3</li>
        <li>12gsd3</li>
        <li>123</li>
        <li>12gsd3</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>12gds3</li>
        <li>123</li>
        <li>123</li>
        <li>1vzxcb23</li>
        <li>123</li>
        <li>12sdzx3</li>
        <li>12vcz3</li>
        <li>12bxc3</li>
        <li>12gdsg3</li>
        <li>12bcvxb3</li>
        <li>12sgs3</li>
        <div class="last">top</div>
    </ul>
    <div class="box">到顶部</div>
    <script>
                /*
         * 1、点击事件 onclick
         */
        // 1-1、点击列表中的某项,该项移除。
        // 1-2、点击列表中的某项,其背景变色。
        // 1-3、点击按钮btnTop,网页滚动到顶部。
        // 1-3、点击按钮btnToList,网页滚动到列表顶部(需要获取列表的位置)。


        $all('li').forEach(item=>{
            item.onclick=function(){
                item.style.backgroundColor='#000'
                setTimeout(() => {
                    item.remove()
                }, 50);
            }
        })

        // $all('li').forEach(item=>{
        //     item.onclick=function(){
        //         item.remove()
        //     }
        // })




        $('.box').onclick=function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0
        }

        $('.last').onclick=function(){
            $('ul').scrollTop=0
        }


        function $(id){
            return document.querySelector(id)
        }
        function $all(id){
            return document.querySelectorAll(id)
        }
    </script>
</body>
</html>